<template>
	<view class="forgot-password-container">
		<!-- <u-navbar title="忘记密码" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder></u-navbar> -->
		<view class="form-container">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth="80">
				<u-form-item label="邮箱" prop="userInfo.email" borderBottom>
					<u--input v-model="model1.userInfo.email" border="none" placeholder="请输入邮箱地址"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="userInfo.code" borderBottom>
					<u--input v-model="model1.userInfo.code" border="none" placeholder="请输入验证码"></u--input>
					<u-button slot="right" type="primary" size="mini" @click="getCode" class="verify-code-btn" :class="{'disabled': countdown > 0}" customStyle="min-width: 180rpx; height: 70rpx; line-height: 70rpx; padding: 0 20rpx; margin-left: 20rpx; border-radius: 35rpx; background: linear-gradient(to right, #44ADFB, #0070FF); box-shadow: 0 6rpx 12rpx rgba(0, 112, 255, 0.2); transition: all 0.3s ease;">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</u-button>
				</u-form-item>
				<u-form-item label="新密码" prop="userInfo.password" borderBottom>
					<u--input v-model="model1.userInfo.password" type="password" border="none" placeholder="请输入新密码"></u--input>
				</u-form-item>
				<u-form-item label="确认密码" prop="userInfo.confirmPassword" borderBottom>
					<u--input v-model="model1.userInfo.confirmPassword" type="password" border="none" placeholder="请再次输入新密码"></u--input>
				</u-form-item>
			</u--form>
			
			<view class="btn-group">
				<u-button type="primary" text="重置密码" customStyle="margin-top: 50px" @click="submit"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js'
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						email: '',
						code: '',
						password: '',
						confirmPassword: ''
					},
				},
				countdown: 0,
				rules: {
					'userInfo.email': [
						{
							required: true, 
							message: '请输入邮箱地址',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.email(value);
							},
							message: '邮箱格式不正确',
							trigger: ['change','blur'],
						}
					],
					'userInfo.code': {
						type: 'string',
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['blur']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						min: 6,
						message: '密码不能少于6位',
						trigger: ['blur']
					},
					'userInfo.confirmPassword': {
						type: 'string',
						required: true,
						validator: (rule, value, callback) => {
							return value === this.model1.userInfo.password;
						},
						message: '两次输入的密码不一致',
						trigger: ['blur']
					}
				}
			};
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack()
			},
			// 获取验证码
			getCode() {
				if(this.countdown > 0) return;
				if(!this.model1.userInfo.email) {
					uni.$u.toast('请先填写邮箱地址');
					return;
				}
				if(!uni.$u.test.email(this.model1.userInfo.email)) {
					uni.$u.toast('邮箱格式不正确');
					return;
				}
				
				// 开始倒计时
				this.countdown = 60;
				const timer = setInterval(() => {
					if(this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
				
				// 调用后端发送验证码接口
				request({
					url: '/emailcode-service/email/code',
					method: 'GET',
					data: {
						email: this.model1.userInfo.email
					},
				}).then(res => {
					if (res.message === '验证码发送成功') {
						uni.$u.toast('验证码已发送至邮箱');
					} else {
						uni.$u.toast('验证码发送失败');
						// 发送失败时重置倒计时
						this.countdown = 0;
						clearInterval(timer);
					}
				}).catch(err => {
					console.log(err);
					uni.$u.toast('验证码发送失败');
					// 发送失败时重置倒计时
					this.countdown = 0;
					clearInterval(timer);
				});
			},
			// 提交表单
			submit() {
				this.$refs.uForm.validate().then(res => {
					// 调用重置密码接口
					request({
						url: '/user-service/user/forget',
						method: 'POST',
						data: {
							email: this.model1.userInfo.email,
							code: this.model1.userInfo.code,
							password: this.model1.userInfo.password
						},
					}).then(res => {
						if (res.code === 200) {
							uni.$u.toast('密码重置成功');
							// 跳转到登录页
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/login/login'
								});
							}, 1500);
						} else {
							uni.$u.toast(res.message || '密码重置失败');
						}
					}).catch(() => {
						uni.$u.toast('密码重置失败，请重试');
					});
				}).catch(errors => {
					uni.$u.toast('校验失败');
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	
	.forgot-password-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		
		.form-container {
			padding: 30rpx;
			
			/deep/ .u-form-item {
				padding: 24rpx 0;
				
				.u-form-item__body__left__content {
					color: #333;
					font-weight: 500;
				}
				
				.u-input {
					height: 80rpx;
				}

				.verify-code-btn {
					min-width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 20rpx;
					margin-left: 20rpx;
					border-radius: 35rpx;
					background: linear-gradient(to right, #44ADFB, #0070FF);
					box-shadow: 0 6rpx 12rpx rgba(0, 112, 255, 0.2);
					transition: all 0.3s ease;
					
					&.disabled {
						background: #ccc;
						box-shadow: none;
						opacity: 0.8;
					}
					
					&:active {
						transform: scale(0.98);
						box-shadow: 0 3rpx 6rpx rgba(0, 112, 255, 0.1);
					}
				}
			}
			
			.btn-group {
				padding: 40rpx 20rpx;
				
				/deep/ .u-button {
					height: 90rpx;
					border-radius: 45rpx;
					
					&--primary {
						background: linear-gradient(to right, #44ADFB, #0070FF);
						box-shadow: 0 10rpx 20rpx rgba(0, 112, 255, 0.2);
					}
					
					&__text {
						font-size: 32rpx;
						font-weight: 500;
					}
				}
			}
		}
	}
</style>